<template>
	<view style="background-color: #F8F8F8;">
		<!-- 搜索框区域 -->

		<view class="searchmain">
			<view class="search">
				<image class="search_img" src="https://tilin.gitee.io/super_hero_preview/static/icons/search.png">
				</image>
			</view>
			<input class="search_input" type="text" placeholder="找预告" placeholder-class="input-placeholder" confirm-type="搜索" focus maxlength="10" @confirm="toSearch"
				@input="toSearch" />
		</view>
		<view style="height: 65rpx;margin-bottom: 20rpx;background-color: #F8F8F8;"></view>
		<!-- 预告片列表 -->
		<view class="list">
			<view class="list_item" v-for="(item,index) in searchData" :key="index" @click="pathclick(item)">
				<image class="list_img" :src="item.images.small">
				</image>
				<view class="list_text">{{item.title}}</view>
			</view>


		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchData: [],
				originData: [],
				keywords: '',
				page:1,
				size:12,
				total:0
			}
		},
		created() {
			this.getlist()
		},
		onReachBottom(){
			this.page++
			this.size = this.size * this.page
			if(this.size >= 72) return
			this.getlist()
		},
		methods: {
			//跳转详情
			pathclick(item){
			uni.navigateTo({
			    url: '../nedek/nedek?id=' + item.id
			});
			},
			toSearch(e) {
				let keywords = e.detail.value.trim()
				if (!keywords) {
					this.searchData = this.originData
				}else{
					this.searchData = this.originData.filter(v => keywords == v.title)
				}
			},
			getlist() {
				
				const {
					subjects: dataRes
				} = require('../../static/mock/comming.json')
				this.originData = dataRes
				
				this.total = dataRes.length
				this.searchData = []
				for(var i = 0; i < this.originData.length; i++){
					if(i  < this.size){
						this.originData[i].images.small = this.originData[i].images.small.replace('https://', 'https://images.weserv.nl/?url=')
						this.searchData.push(this.originData[i])
					} 
				}
			   
			},
		}
	}
</script>

<style>
	.search_img {
		width: 40rpx;
		height: 40rpx;
		padding: 0 10rpx;
       
	}

	.search {
		height: 65rpx;
		/* padding: 0 10rpx; */
		background-color: #eaeaea;
		display: flex;
		align-items: center;
	}

	.searchmain {
		display: flex;
		padding: 10rpx 20rpx 10rpx 20rpx;

		background-color: #F8F8F8;
		flex-direction: row;
		height: 65rpx;
		align-items: center;
		position: fixed;
		top: 100;
		z-index: 9;
		width: 100%;
	}

	.input-placeholder {
		font-size: 30rpx;
	}

	.search_input {
		width: 85.5%;
		height: 100%;
		background-color: #eaeaea;
		font-size: 30rpx;
	}

	.list {
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		background-color: #F8F8F8;
		/* justify-content: flex-start; */
		padding: 0rpx 4rpx 15rpx 8rpx;

	}

	.list_text {
		font-size: 30rpx;
		padding: 10rpx 0;
		width: 190rpx;
		text-align: center;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.list_item {
		background: #fff;
		padding: 10rpx 11rpx 10rpx 10rpx;
		margin: 12rpx;
		border-radius: 10rpx;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
	}

	.list_img {
		width: 200rpx;
		height: 270rpx;
	}
</style>
